<template>
	<view class="login-container">
		<view class="absolve-wrapper">
			<view class="logo">
				<image src="/static/images/l.png" class="logo-img"></image>
			</view>
			<view class="login-main" style="margin-top: 20px;">
				<view class="input-wrapper shadow-sm">
					<i class="iconfont icon-phone icon"></i>
					<input placeholder="请输入用户名" v-model="userInfo.username" maxlength="11" />
				</view>

				<view class="input-wrapper shadow-sm">
					<i class="iconfont icon-password icon"></i>
					<input v-if="isText" type="text" placeholder="请输入密码" v-model="userInfo.password" />
					<input v-else type="password" placeholder="请输入密码" v-model="userInfo.password" />
					<i class="iconfont eye" :class="isText ? 'icon-openEye' : 'icon-closeEye'"
						@click="isText = !isText"></i>
				</view>
				<button class="cu-btn round login-button lg cu-load" :class="{ loading: loading }"
					@click="handleLoginIn">登录</button>
				<view style="width:430rpx;font-size: 28rpx;margin-top:10px" @click="redirectToPage">注册</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../api/config.js'

	const BASE_API = config.admin_base_api

	export default {
		data() {
			return {
				loading: false,
				isText: false,
				userInfo: {
					username: '',
					password: '',
				}
			};
		},
		methods: {
			redirectToPage() {
				uni.navigateTo({
					url: '/pages/login/register'
				});
			},
			async handleLoginIn() {
				if ((this.userInfo.username === '') || (this.userInfo.password === '')) {
					uni.showToast({
						title: '用户名和密码不能为空!',
						icon: 'none'
					});
					return false;
				};
				const {
					username,
					password
				} = this.userInfo

				uni.showLoading({
					title: '登录中',
					mask: true
				});

				setTimeout(() => {
					const login_api = BASE_API + '/wx/appUser/login'
					uni.request({
						url: login_api,
						method: 'POST',
						data: {
							username,
							password
						},
						success: (login_res) => {
							console.log('-------------')
							console.log(login_res)
							let {
								code,
								msg,
								data
							} = login_res.data
							uni.hideLoading()
							uni.showToast({
								title:'登录成功',
								icon:'success'
							})
							
							if (code == 200) {

								let userInfo = data.user
								uni.setStorageSync('userInfo', userInfo)
								uni.setStorageSync('uid', userInfo.userId)
								uni.setStorageSync('token', data.token)
								uni.switchTab({
									url: '/pages/home/home'
								});
							} else {
								uni.showToast({
									title: msg,
									icon: 'error'
								})
							}
						}
					})
				}, 700)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.login-container {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;

		// background: url(../../static/loginBg.png) no-repeat;
		// background-size: contain;
		.absolve-wrapper {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.background-img {
			width: 100%;
			height: 100%;
		}

		.logo {
			text-align: center;
			margin-top: 12%;

			.logo-img {
				width: 100px;
				height: 100px;
			}
		}

		.text-title {
			font-size: 48rpx;
			margin-top: 5%;
			text-align: center;
			color: #fffefe;
		}

		.login-main {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 10%;
			right: 10%;

			.input-wrapper {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgb(242, 242, 242);
				position: relative;

				.icon {
					margin-right: 10px;
					font-size: 16px;
				}

				.eye {
					float: right;
					position: absolute;
					right: 5px;
					font-size: 16px;
				}
			}

			.login-button {
				width: 100%;
				color: #fff;
				background: #409EFF;
				letter-spacing: 2px;
				height: 45px;
				margin-top: 75rpx !important;
			}
		}

		.other-login {
			position: absolute;
			bottom: 5%;
			left: 10%;
			right: 10%;

			.other-text {
				text-align: center;
				color: rgba(0, 0, 0, 0.4);
				font-size: 28rpx;
				position: relative;

				&::before,
				&::after {
					position: absolute;
					background: rgba(0, 0, 0, 0.15);
					content: '';
					height: 1px;
					top: 50%;
					width: 100px;
				}

				&::before {
					left: 5px;
				}

				&::after {
					right: 5px;
				}
			}

			.login-list {
				margin-top: 15px;
				display: flex;
				justify-content: center;
				align-items: center;

				.other-item {
					flex: 1;
					font-size: 40px;
					text-align: center;

					&.icon-weixin {
						color: #17d874;
					}

					&.icon-qq {
						color: #32d6f5;
					}

					&.icon-weibo {
						color: rgb(234, 93, 92);
					}

				}
			}
		}

		/deep/ {
			.input-placeholder {
				color: rgb(194, 194, 194);
				font-size: 30rpx;
			}
		}
	}
</style>